﻿<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>选择题</title>

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link href="css/choose.css" rel="stylesheet" type="text/css">

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/Questions.js"></script>
  <link href="css/index01.css" rel="stylesheet">
  <link href="css/loading.css" rel="stylesheet" type="text/css">
<script>
var HH = 0;//时
var mm = 0;//分
var ss = 0;//秒
var timeState = true;//时间状态 默认为true 开启时间
var questions= QuestionJosn;
var itemList=["A","B","C","D","E","F"]
var activeQuestion=0; //当前操作的考题编号
var questioned = 0; //
var checkQues = []; //已做答的题的集合
/*实现计时器*/
var time = setInterval(function () {
    if (timeState) {
        if (HH == 24) HH = 0;
        str = "";
        if (++ss == 60) {
            if (++mm == 60) { HH++; mm = 0; }
            ss = 0;
        }
        str += HH < 10 ? "0" + HH : HH;
        str += ":";
        str += mm < 10 ? "0" + mm : mm;
        str += ":";
        str += ss < 10 ? "0" + ss : ss;
        $(".time").text(str);
    } else {
        $(".time").text(str);
    }
}, 1000);
//展示考卷信息
function showQuestion(id){
    $(".questioned").text(id+1);
    questioned = (id+1)/questions.length
    if(activeQuestion!=undefined){
        $("#ques"+activeQuestion).removeClass("question_id").addClass("active_question_id");
    }
    activeQuestion = id;
    $(".question").find(".question_info").remove();
    var question = questions[id];
    $(".question_title").html("<strong>第 "+(id+1)+" 题 、</strong>"+question.questionTitle);
    var items = question.questionItems.split(";");
    var item="";
    for(var i=0;i<items.length;i++){
        item ="<li class='question_info' onclick='clickTrim(this)' id='item"
                +i+"'><input type='radio' name='item' value='"+itemList[i]+"'>&nbsp;"+itemList[i]+"."+items[i]+"</li>";
        $(".question").append(item);
    }
    $(".question").attr("id","question"+id);
    $("#ques"+id).removeClass("active_question_id").addClass("question_id");
    for(var i=0;i<checkQues.length;i++){
        if(checkQues[i].id==id){
            $("#"+checkQues[i].item).find("input").prop("checked","checked");
            $("#"+checkQues[i].item).addClass("clickTrim");
            $("#ques"+activeQuestion).removeClass("question_id").addClass("clickQue");
        }
    }
    progress();
}

/*答题卡*/
function answerCard(){
    $(".question_sum").text(questions.length);
    for(var i=0;i<questions.length;i++){
        var questionId ="<li id='ques"+i+"'onclick='saveQuestionState("+i+")' class='questionId'>"+(i+1)+"</li>";
        $("#answerCard ul").append(questionId);
    }
}

/*选中考题*/
var Question;
function clickTrim(source){
    var id = source.id;
    $("#"+id).find("input").prop("checked","checked");
    $("#"+id).addClass("clickTrim");
    $("#ques"+activeQuestion).removeClass("question_id").addClass("clickQue");
    var ques =0;
    for(var i=0;i<checkQues.length;i++){
       if( checkQues[i].id==activeQuestion&&checkQues[i].item!=id){
           ques = checkQues[i].id;
           checkQues[i].item = id;//获取当前考题的选项ID
           checkQues[i].answer =$("#"+id).find("input[name=item]:checked").val();//获取当前考题的选项值
       }
    }
    if(checkQues.length==0||Question!=activeQuestion&&activeQuestion!=ques){
        var check ={};
        check.id=activeQuestion;//获取当前考题的编号
        check.item = id;//获取当前考题的选项ID
        check.answer =$("#"+id).find("input[name=item]:checked").val();//获取当前考题的选项值
        checkQues.push(check);
    }
    $(".question_info").each(function(){
        var otherId =$(this).attr("id");
        if(otherId!=id){
            $("#"+otherId).find("input").prop("checked",false);
            $("#"+otherId).removeClass("clickTrim");
        }
    })
    Question = activeQuestion;
}

/*设置进度条*/
function progress(){
    var prog = ($(".active_question_id").length+1)/questions.length;
    var pro = $(".progress").parent().width() * prog;
    $(".progres").text((prog*100).toString().substr(0,5)+"%")
    $(".progress").animate({
        width: pro,
        opacity: 0.5
    }, 1000);
}

/*保存考题状态 已做答的状态*/
function saveQuestionState(clickId){
    showQuestion(clickId)
}

$(function(){
    $(".middle-top-left").width($(".middle-top").width()-$(".middle-top-right").width())
    $(".progress-left").width($(".middle-top-left").width()-200);
    progress();
    answerCard();
    showQuestion(0);
    /*alert(QuestionJosn.length);*/
    /*实现进度条信息加载的动画*/
    var str = '';
    /*开启或者停止时间*/
    $(".time-stop").click(function () {
        timeState = false;
        $(this).hide();
        $(".time-start").show();
    });
    $(".time-start").click(function () {
        timeState = true;
        $(this).hide();
        $(".time-stop").show();
    });

    /*收藏按钮的切换*/
    $("#unHeart").click(function(){
        $(this).hide();
        $("#heart").show();
    })
    $("#heart").click(function(){
        $(this).hide();
        $("#unHeart").show();
    })

    /*答题卡的切换*/
    $("#openCard").click(function(){
        $("#closeCard").show();
        $("#answerCard").slideDown();
        $(this).hide();
    })
    $("#closeCard").click(function(){
        $("#openCard").show();
        $("#answerCard").slideUp();
        $(this).hide();
    })

    //提交试卷
    $("#submitQuestions").click(function(){
        /*alert(JSON.stringify(checkQues));*/
        alert("已做答:"+($(".clickQue").length)+"道题,还有"+(questions.length-($(".clickQue").length))+"道题未完成");
    })
    //进入下一题
    $("#nextQuestion").click(function(){
        if((activeQuestion+1)!=questions.length) showQuestion(activeQuestion+1);
        showQuestion(activeQuestion)
    })
})
</script>

</head>
<body>
<div class="container" style="width: 100%;margin: 0px;padding:0;border: none  ">
  <!--default默认主题 暗色调inverse-->
  <nav class="navbar navbar-default" style="background: #ddd">
    <div class="navbar-header col-md-1" style="margin-right:10px;">
      <a href="#" class="navbar-brand">悦知</a>
    </div>
    <div id="nav1" class="collapse navbar-collapse col-md-12">
      <ul class="nav navbar-nav">
        <!--active加深-->
        <li><a href="index.html">首页</a></li>
        <li><a href="questionbank.html">题库广场</a></li>
        <li><a href="programeonline.html">在线编译</a></li>
        <li><a href="testinfo.html">能力测试</a></li>
        <li><a href="#">排行榜</a></li>
        <li><a href="personinfo.html"style="margin-left: 720px">个人中心</a></li>
      </ul>
      <!--搜索框-->
      <form action="" class="navbar-form navbar-right" >
        <input type="text" placeholder="搜索" class="form-control"/>
        <a class="btn btn-primary">搜索</a>
      </form>
    </div>
  </nav>
</div>
<div style="margin-top: 50px;">
  <div class="col-md-1"></div>
  <div class="col-md-10">
    <div class="content">

     
      <div style="width: 100%;height:auto;display: inline-block;border: 1px solid white;position: relative;margin-top:10px;">
        <div style="width: 100%;">
          <div style="width: 80%;margin: 0px auto">
            <div style="width: 100%;height:100px;border: 1px solid #CCC;border-bottom:none;background:#FFF;">
              <div class="middle-top" style="width: 100%;height: 50px;border-bottom: 1px solid #CCC;background:#000; position:relative;">
                <div class="middle-top-left pull-left"
                                     style="height: 90%;padding-left: 0px;background:#000;color:#FFF;">
                  <div class="text-center pull-left progress-left"
                                         style="border: 1px solid #A2C69A;background:#FFF;border-radius:10px;line-height:20px;height:20px;margin:15px 0px 15px 0px;font-size: 11px;position:relative;">
                    <div class="progress pull-left"
                                             style="background: #609E53;width: 0px;height:18px;position:absolute;left: 0px;"></div>
                    <div class="pro-text" style="left: 0px;color: #609E53;position:absolute;top:0px;width:100%;"> 已完成<span class="progres"></span></div>
                  </div>
                  <div class="pull-left" style=" width:135px;line-height:20px;height:20px;margin:15px;font-size:15px;"> 
                    <!--已做答的数量和考题总数--> 
                    当前第<span class="questioned"></span>题/共<span class="question_sum"></span>题 </div>
                </div>
                <div class="middle-top-right text-center pull-left"
                                     style="width:160px; height: 100%;border-left: 1px solid red;position: absolute;right: 0px;">
                  <div class="stop pull-left" style="width: 50px; height: 100%;padding: 10px;"> <a href="javascript:void(0);" class="text-center" style="color: #FE6547;">
                    <div class="time-stop glyphicon glyphicon-pause" title="暂停"
                                                 style="width:30px;height: 30px;line-height:30px; border-radius:15px;border: 1px solid #FE6547;"></div>
                    <div class="time-start glyphicon glyphicon-play" title="开始"
                                                 style="width:30px;height: 30px;line-height:30px;border-radius:15px;border: 1px solid #FE6547;display:none;"></div>
                    </a> </div>
                  <div class="pull-left"  style="width: 100px; height: 100%;padding: 10px 0px 10px 0px;">
                    <div class="time" style="width:100px;height: 30px;line-height:30px; border-radius:15px;font-size:20px;color:#FFF;"> </div>
                  </div>
                </div>
              </div>
              <div style="width: 100%;height: 50px;font-size:15px;color: #000;line-height: 50px;padding-left: 20px;">
                <div style="color:#FFF;background: red;width: 22px;height: 22px;border-radius:11px;line-height:22px;font-size:13px; text-align: center;"
                                     class="glyphicon glyphicon-map-marker"></div>
                [单选题] </div>
            </div>
            <div style="width: 100%;height:auto;display: inline-block;border: 1px solid #CCC;border-bottom:1px dashed #CCC;background:#FFF;">
              <div style="width: 100%;height: 90%;padding:20px 20px 0px 20px;"> 
                <!--试题区域-->
                <ul class="list-unstyled question" id="" name="">
                  <li class="question_title"></li>
                </ul>
                <!--考题的操作区域-->
                <div class="operation" style="margin-top: 20px;">
                  <div class="text-left"
                                         style="margin-left:20px;font-size: 15px;float: left;line-height: 30px;">
                    <div id="unHeart" style="color:#999999;"> <span class="glyphicon glyphicon-heart-empty"></span> <span>收藏本题</span> </div>
                    <div id="heart" style="color:#C40000;display: none;"> <span class="glyphicon glyphicon-heart"></span> <span>已收藏</span> </div>
                  </div>
                  <div class="text-right" style="margin-right: 20px;">
                    <div class="form-group" style="color: #FFF;">
                      <a href="finaltest.html"><button class="btn btn-success" id="submitQuestions">提交试卷</button></a>
                      <a href="programe.html"><button class="btn btn-info" id="nextQuestion">下一题</button></a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div style="width: 100%;height:auto;display: inline-block;border: 1px solid #CCC;border-top:none;background:#FFF;">
              <div style="width: 100%;padding:20px;">
                <div class="panel-default">
                  <div class="panel-heading" class="panel-heading" id="closeCard" style="color: #DCE4EC;font-size: 15px;display: none;background: none;">
                  <span>收起答题卡</span> <span class="glyphicon glyphicon-chevron-up"></span> </div>
                <div class="panel-heading" id="openCard" style="font-size: 15px;background: none;"> <span>展开答题卡</span> <span class="glyphicon glyphicon-chevron-down"></span> </div>
                <div id="answerCard" style="display: none;">
                  <div class="panel-body form-horizontal" style="padding: 0px;">
                    <ul class="list-unstyled">
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    </div>
    </div>
  </div>
</div>
<div class="col-md-1"></div>
</div>

</body>
</html>
